<template>
	<view class="content">
		<view
			class="top"
			:style="[
				{
					background: `url(${data.thumbnail}) no-repeat center`,
				},
				{ backgroundSize: 'cover' },
			]"
		></view>
		<view class="info">
			<view class="list">
				<view class="list1">{{ data.post_title }}</view>
				<view class="list2">{{ data.is_enroll === 1 ? '已报名' : '未报名' }} | {{ data.bm_num }}/{{ data.post_limitnum }}</view>
				<view class="list3">
					<text>地址：</text>
					<text>{{ data.post_place }}</text>
				</view>
				<view class="list4">
					<text>时间：</text>
					<text>{{ data.train_starttime }}-{{ data.train_endtime }}</text>
				</view>
				<yfsVideo v-if="data.video" :src="data.video" style="margin-top: 100rpx; z-index: 99999999999999;"></yfsVideo>
				<view class="qiehuan">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#5A1524"></u-tabs>
					<view class="box1" v-if="current === 0" style="margin-bottom: 100rpx;">
						<rich-text :nodes="strings" decode v-html="kaola_content" selectable></rich-text>
					</view>
					<view class="box1" v-else style="margin-bottom: 100rpx;">
						<rich-text :nodes="strings" decode v-html="wonderful_moment" selectable></rich-text>
					</view>
				</view>
			</view>
			<!-- <view class="heibai"></view> -->
		</view>
		<view class="fixed">
			<view class="sanji1" v-if="gray == 1"></view>
			<view class="sanji" v-else></view>
			<view class="text1">
				<text v-if="data.pay_type == 1">微信支付：</text>
				<text v-else-if="data.pay_type == 2">鲜花支付：</text>
				<text v-else-if="data.pay_type == 3">免费</text>

				<text v-if="data.pay_type == 1">{{ data.post_cost }}元</text>

				<text v-else-if="data.pay_type == 2" class="huaduo">{{ data.post_cost | curreny }}</text>

				<text v-else-if="data.pay_type == 3"></text>
			</view>

			<view class="text2" style="background-color: #999;" v-if="gray == 1">已报名</view>
			<view class="text2" @click="registerNow" v-else>立即报名</view>
		</view>
	</view>
</template>

<script>
import yfsVideo from '@/components/yfs-video/yfs-video.vue';
export default {
	components: {
		yfsVideo,
	},
	data() {
		return {
			kaola_content: '',
			wonderful_moment: '',

			gray: '', //0未报名 ； 1已报名
			current: 0,
			pay_type: 0, // 支付方式
			list: [
				{
					name: '文章详情',
				},
				{
					name: '精彩瞬间',
				},
			],
			id: 0,
			data: {},
			videoCurrTime: 0,
		};
	},

	methods: {
		change(index) {
			this.current = index;
		},

		async trnArticleDetails() {
			const res = await this.$u.post(
				'/api/Allnews/train_detial',
				{
					article_id: this.id,
				},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			console.log('res >>  ', res);
			this.data = res.data;

			this.kaola_content = res.data.kaola_content
				.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, '<p')
				.replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="width: 100%;" $1');
			this.wonderful_moment = res.data.wonderful_moment
				.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, '<p')
				.replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="width: 100%;" $1');

			//支付方式 1微信支付 2鲜花 3免费
			this.pay_type = res.data.pay_type;
			uni.setStorageSync('theWay', res.data.pay_type);
		},
		//立即报名
		registerNow() {
			var list = {
				post_cost: this.data.post_cost, // 支付金额
				pay_type: this.pay_type, //   支付方式
				id: this.data.id, // 文章的id
			};

			uni.navigateTo({
				url: '../regDetails/regDetails?list=' + JSON.stringify(list),
			});
		},
	},
	onLoad(obj) {
		var obj1 = JSON.parse(obj.obj);
		console.log('obj.obj.id :>> ', obj1);
		this.id = obj1.id;
		this.gray = obj1.gray;

		this.trnArticleDetails();
	},
	filters: {
		curreny: function(data) {
			console.log('data :>> ', data);
			data = Number(data).toFixed(2);
			if (data == parseInt(data)) {
				data = parseInt(data);
			}
			return data;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	 width: 100vw;
	// height: 100vh;
	// overflow: scroll;
	/deep/.bbl-content {
		margin-top: 40rpx;
	}
	.top {
		width: 100vw;
		height: 423rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		position: relative;
		.list {
			position: absolute;

			top: -10rpx;
			left: 0;
			width: 100vw;
			height: 100vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ffffff;
			padding: 40rpx 29rpx;
			.list1 {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1a1a1a;
				line-height: 40rpx;
			}
			.list2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-top: 39rpx;
			}

			.list3,
			.list4 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #808080;
				line-height: 30rpx;
				margin-top: 39rpx;
				text:nth-child(1) {
					color: #333333;
				}
			}
			.qiehuan {
				margin-top: 50rpx;
				.box1 {
					margin-top: 35rpx;
					text {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
					}
					image {
						margin-top: 36rpx;
						width: 100%;
					}
				}
			}
		}
		.heibai {
			position: absolute;
			top: 351rpx;
			left: 0;
			width: 750rpx;
			height: 20rpx;
			background: #f5f5f5;
		}
	}
	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100rpx100rpx;
		display: flex;

		.sanji1 {
			position: absolute;
			top: 0;
			right: 35%;
			width: 0;
			height: 0;
			border-bottom: 100rpx solid #999;
			border-left: 64rpx solid transparent;
		}
		.sanji {
			position: absolute;
			top: 0;
			right: 35%;
			width: 0;
			height: 0;
			border-bottom: 100rpx solid #5a1524;
			border-left: 64rpx solid transparent;
		}
		.text1,
		.text2 {
			height: 100rpx;
			line-height: 100rpx;
		}
		.text1 {
			width: 65%;
			background-color: #fff1e3;
			padding-left: 80rpx;
			text:nth-child(2) {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #5a1524;
			}

			.huaduo::after {
				content: '';
				display: inline-block;
				vertical-align: middle;
				margin-left: 10rpx;
				margin-top: -10rpx;
				width: 36rpx;
				height: 54rpx;
				background: url(https://s3.ax1x.com/2020/11/27/DDBJld.png) no-repeat center;
				background-size: cover;
			}
		}
		.text2 {
			width: 35%;
			background-color: #5a1524;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
